import React, { Component } from 'react'
import { Layout, Menu } from 'antd'
import routes from '@/router/routes'
import { Link, withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { AppstoreOutlined } from '@ant-design/icons'
import { toggleCollapseSidebar } from '@/store/actions/app'
const { Sider } = Layout
const { SubMenu, Item } = Menu
class MySider extends Component{
  onBreakpoint =(broken) => {
    this.props.toggleCollapseSidebar(broken)
  }
  generateMenus = (routes) => {
    return routes.map(route => {
      if (route.children) {
        return (
          <SubMenu key={route.name} title={route.name} icon={<AppstoreOutlined />}>
            {this.generateMenus(route.children)}
          </SubMenu>
        )
      } else {
        return (
          <Item key={route.path}>
            <Link to={route.path}>
              <span>{route.name}</span>
            </Link>
          </Item>
        )
      }
    })
  }
  render() {
    const path = this.props.location.pathname
    const { sidebarCollapsed } = this.props
    return (
      <Sider onBreakpoint={this.onBreakpoint} breakpoint="lg" style={this.props.style} width={this.props.width} collapsed={sidebarCollapsed} collapsible trigger={null}>
        <div className="logo"></div>
        <Menu mode="inline" theme="dark" selectedKeys={[path]}>
          {this.generateMenus(routes)}
        </Menu>
      </Sider>
    )
  }
}
export default connect((state) => ({ ...state.app }), { toggleCollapseSidebar })(withRouter(MySider))